<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./jquery.js"></script>
<style>
    .protected{
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
    .hilight{
        color: red;
    }
</style>
<body>
    <div class="protected"></div>

    <!--过滤元素-->
    <p>Hello</p>
    <p>Hello Again</p>
    <p class="selected">And Again</p>

    <!--is代码元素-->
    <div> <p id="is_p"></p></div>



   <div><span id="spans">1</span></div>
    <span>2</span>
    <span>3</span>



    <ul>
        <li>list item 1</li>
        <li>list item 2
          <ul>
            <li>list item 2-a</li>
            <li>list item 2-b</li>
          </ul>
        </li>
        <li>list item 3</li>
        <li>list item 4</li>
      </ul>

      <!--not代码-->
      <i>11</i>
      <i id="i_id">22</i>
      <i>33</i>



      <!--子元素查找-->
      <div id="parent"><p>p</p><span id="child_span">span</span></div>

      <!--closest最近元素查找-->
      <ul>
        <li><b>Click me!</b></li>
        <li>You can also <b>Click me!</b></li>
    </ul>


    <!--nextUntil-->
    <dl>
        <dt id="term-1" >term 1</dt>
        <dd>definition 1-a</dd>
        <dd>definition 1-b</dd>
        <dd>definition 1-c</dd>
        <dd>definition 1-d</dd>
      
        <dt id="term-2">term 2</dt>
        <dd>definition 2-a</dd>
        <dd>definition 2-b</dd>
        <dd>definition 2-c</dd>
      
        <dt id="term-3" >term 3</dt>
        <dd>definition 3-a</dd>
        <dd>definition 3-b</dd>
      </dl>


      <div class="parent"><p class="child">child</p></div>


      <!--parents代码-->>
      <div><p><span><i id="parents"></i></span></p></div>

      <iframe src="" frameborder="1" style="overflow:scroll">sasas</iframe>
    <script>


        //hasClass检测属性
        $("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ width: 300 },1000)
      .animate({ width: 100 },1000)
      .animate({ width: 300 },1000)
      .animate({ width: 100 },1000)
      .animate({ width: 200 },1000);
});


//过滤 filter过滤出来没有class的
let filter_p=$("p").filter(function(){
    return !$(this).hasClass("selected");
});
console.log(filter_p);



//is操作符
  console.log($("p#is_p").parent().is("div"));//true
 
  //map映射


  //has 
  $('li').has('ul').css('background-color', 'red');


//   console.log($("#spans").text((v)=>{
//       return  v==1;
//   }).css("background-color","red"));


//not 查询不带有id的i标签
console.log($("i").not($("#i_id")));


console.log("________________________");
//slice截取juqery结点，使用[0]这种差不多，只是可以多选  slice(-1)为最后一个元素
console.log($("p").slice(0,2));



//查找子元素
 console.log($("#parent").children());
 console.log($("#parent").children().is("p"));//true
//查找特定的子元素
console.log($("#parent").children("#child_span"));

//closest最近元素查找   事件委托
$(document).bind("click", function (e) {
    $(e.target).closest("li").toggleClass("hilight");
});

//find元素，查找元素和 $("")差不多

//next 找到每个段落的后面紧邻的同辈元素。

//nextAll 找到目标元素的后面的所有元素

//nextUntil 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
$('#term-2').nextUntil('dt').css('background-color', 'red');//给#term-2后面直到dt前的元素加上红色背景


//offsetParent() 返回第一个匹配元素用于定位的父节点。
//向上查找，直到查找到有定位的父辈结点


//父元素parent 取得一个包含着所有匹配元素的唯一父元素的(元素集合:也包含子元素)。

$(".child").click(function(){
    $(this).parent().css({"background-color":"red"});
})
console.log("_____________________");
//parents 找到所有的父辈
console.log($("#parents").parents());
console.log($("#parents").parents("p"));//找到所有是父辈是p的
// parentsUntil找到当前元素的所有父辈元素，直到x元素为止

//prev前一个同级元素
//prevall前面的同级元素的所有
//prevUtil 

//siblings 找到这个元素的(前后)同级元素



//add 将这个元素的dom(jquery结点)结点组添加一个新的结点组(可以是已经有的内容，也可以是在add(xxx)创建的内容)

//addself 添加新的内容到当前自己结点组当中

//addback 添加多个元素到当前结点组

//contents 查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容

//end 回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。

//<p><span>Hello</span>,how are you?</p>
//$("p").find("span").end()
//[ <p><span>Hello</span> how are you?</p> ]
</script>
</body>
</html>